<template>
  <div class="pane">
    <div class="pane-left-wrap">
      <div class="pane-top-wrap">
        <el-button @click="handleCreateDictMain" type="primary">新增字典</el-button>
        <el-button type="success">从字典库中添加</el-button>
      </div>
      <x2-table
        highlight-current-row
        :height="'calc(100vh - 205px)'"
        @handleRowAction="handleRowAction"
        border
        :data="dictMainDataList"
        :columns="dictMainTableConfig.fields"
        @row-click="handleRowClick"
      >
      </x2-table>
    </div>
    <div class="pane-right-wrap">
      <div class="pane-top-wrap">
        <span style="color: #777">{{ currentDict.dictName ? '字典：' + currentDict.dictName : '' }}</span>
        <x2-space></x2-space>
        <el-button :disabled="currentDict.id ? false : true" @click="handleCreateDict" type="primary">新增键值</el-button>
      </div>
      <x2-table :height="'calc(100vh - 205px)'" @handleRowAction="handleRowAction" border :data="dictDataList" :columns="dictTableConfig.fields" />
    </div>
  </div>
</template>

<script>
const isdebug = true
import { dictMainTableConfig, dictTableConfig } from './config'
import DictMainEdit from './dictMainEdit.vue'
import DictEdit from './dictEdit.vue'

export default {
  name: 'DictManage',
  props: {
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dictTableConfig,
      dictMainTableConfig,
      dictMainDataList: [],
      dictDataList: [],
      currentDict: {},
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    handleRowAction(e, row, action) {
      const actions = {
        editDictMain: async (r) => {
          const res = await this.$showDialog({
            component: DictMainEdit,
            dialogParams: {
              title: '数据字典',
              width: '500px',
              'close-on-click-modal': false,
            },
            childParams: {
              id: r.id,
            },
          })

          if (res.closeType == 'confirm') {
            const { param } = res
            const { id: dictId } = param
            const data = [
              {
                tableName: 'z_dictMain',
                action: 'update',
                dataList: [param],
              },
            ]
            const updateRes = await this.$request({
              url: '/lowcode/commonUpdate',
              method: 'post',
              data,
            })
            if (updateRes.code == 0) {
              this.$message.success(updateRes.msg)
              if (param.id == this.currentDict.id) this.currentDict = param
              await this.getList()
            }
          }
        },
        editDict: async (r) => {
          const res = await this.$showDialog({
            component: DictEdit,
            dialogParams: {
              title: '字典键值',
              width: '500px',
              'close-on-click-modal': false,
            },
            childParams: {
              id: r.id,
            },
          })

          if (res.closeType == 'confirm') {
            const { param } = res
            const data = [
              {
                tableName: 'z_dict',
                action: 'update',
                dataList: [param],
              },
            ]
            const updateRes = await this.$request({
              url: '/lowcode/commonUpdate',
              method: 'post',
              data,
            })
            if (updateRes.code == 0) this.$message.success(updateRes.msg)
            await this.getDictList()
          }
        },
      }
      actions[action](row)
      e.stopPropagation()
    },
    handleRowClick(row) {
      if (row.id == this.currentDict.id) return
      this.currentDict = row
      this.getDictList()
    },

    async init() {
      this.getList()
    },

    handleTableAction(action, row) {
      const funcList = {
        navToDesign: (row) => {
          console.log('call > navToDesign', row)
          this.$router.push({ name: 'PageDesign', params: { id: row.scenarioId } })
        },
      }
      funcList[action](row)
    },
    async getList() {
      const res = await this.$request({
        url: '/lowcode/getDataBySql',
        method: 'post',
        data: { sqlid: '页面关联的字典', where: `adl.appId = '${this.id}'` },
      })
      this.dictMainDataList = res.list
      if (JSON.stringify(this.currentDict) == '{}') this.handleRowClick(res.list[0])
    },

    async getDictList() {
      const res = await this.$request({
        url: '/lowcode/getDataBySql',
        method: 'post',
        data: { sqlid: '字典键值明细', where: `mid = '${this.currentDict.id}'` },
      })
      this.dictDataList = res.list
    },

    async handleCreateDict() {
      const res = await this.$showDialog({
        component: DictEdit,
        dialogParams: {
          title: '字典键值',
          width: '500px',
          'close-on-click-modal': false,
        },
        childParams: {
          mid: this.currentDict.id,
        },
      })

      if (res.closeType == 'confirm') {
        const { param } = res
        const data = [
          {
            tableName: 'z_dict',
            action: 'insert',
            dataList: [param],
          },
        ]
        const updateRes = await this.$request({
          url: '/lowcode/commonUpdate',
          method: 'post',
          data,
        })
        if (updateRes.code == 0) this.$message.success(updateRes.msg)
        await this.getList()
      }
    },
    async handleCreateDictMain() {
      const res = await this.$showDialog({
        component: DictMainEdit,
        dialogParams: {
          title: '数据字典',
          width: '500px',
          'close-on-click-modal': false,
        },
        childParams: {},
      })

      if (res.closeType == 'confirm') {
        const { param } = res
        const { id: dictId } = param

        const data = [
          {
            tableName: 'z_dictMain',
            action: 'insert',
            dataList: [param],
          },
          {
            tableName: 'appDictList',
            action: 'insert',
            dataList: [
              {
                id: this.$uuid(),
                dictId,
                appId: this.id,
              },
            ],
          },
        ]
        const updateRes = await this.$request({
          url: '/lowcode/commonUpdate',
          method: 'post',
          data,
        })
        if (updateRes.code == 0) this.$message.success(updateRes.msg)
        // console.log('handleCreatePage res', updateRes)
        await this.getList()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.pane {
  display: flex;
}
.pane-left-wrap {
  flex: 1;
  // border: 1px solid #eee;
  height: calc(100vh - 160px);
}
.pane-right-wrap {
  width: 460px;
  // border: 1px solid #eee;
  height: calc(100vh - 160px);
}
.pane-top-wrap {
  margin: 0 0 10px 0;
  height: 28px;
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
